Skip to main content

Date field

The Date Field component is a versatile tool designed to capture date input from users, offering both a date picker and a manual date input option. This component is particularly useful for applications that require users to select or enter dates, such as booking systems, scheduling applications, or data entry forms. By using the Date Field, businesses can enhance the user experience by providing a flexible and intuitive interface for date selection, ensuring accuracy and consistency in date-related data. The component's dual functionality allows users to either pick a date from a calendar view or manually input a date, catering to different user preferences and needs.

Properties​

To effectively utilize the Date Field component, the following data and attributes are necessary:

  • Component-Level Attributes:
    • Code: A unique identifier for the Date Field component, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the component.
    • Label: The text displayed beside the date field, providing context and clarity to the user about the purpose of the date input.
  • Date Constraints:
    • Minimum Date: Specifies the earliest date that can be selected or entered, ensuring that the date is "from the date or later than" this value. This constraint is useful for preventing past dates in future-oriented applications.
    • Maximum Date: Specifies the latest date that can be selected or entered, ensuring that the date is before this value. This constraint is useful for limiting date selection to a specific timeframe.
  • Group Options:
    • Mandatory Field: A setting (default is OFF) that specifies whether the date field is required to be completed as part of a form. This ensures that users provide necessary date input before proceeding.
    • Help: An optional feature (default is OFF) that displays help text beside the group title, offering additional guidance or information to the user.
    • Enabled: A setting (default is ON) that determines whether the date field is active and can be interacted with by the user. If disabled, the field is visually indicated as inactive, preventing user interaction.

By structuring the Date Field component with these attributes, businesses can create a flexible and user-friendly interface that effectively captures date input. The ability to set date constraints, provide help text, and control user interaction ensures that the component remains a powerful tool for enhancing application functionality and user experience.

Style​

Best Practices​

  • Clarity and Usability: Ensure that the date field is clearly labeled to indicate its purpose. Use descriptive labels that help users understand what date is required (e.g., "Select a date").
  • Accessibility: Make sure the date field is accessible by providing proper labels and ensuring it can be navigated using keyboard shortcuts and screen readers.
  • Consistent Styling: Maintain consistent styling for date fields across your application to create a cohesive user experience.

Highest Value Features​

  • Date Format Guidance: Provide clear instructions or examples of the expected date format (e.g., MM/DD/YYYY) to reduce user errors.
  • Calendar Picker: Implement a calendar picker to allow users to select dates easily, enhancing usability.
  • Error Handling: Clearly indicate errors in date input with visual cues and descriptive messages to guide users in correcting their entries.

All the Settings​

Border​

  • BORDER: Customize the border style, width, and color of the date field to define its outline and separation from other elements. Use the following settings:
    • BORDER OPTIONS:
      • Style: solid, dashed, dotted, etc.
      • Width: specify the thickness of the border in pixels.
      • Color: choose a color using a color picker or HEX, RGBA, HSLA values.

Padding​

  • PADDING: Adjust the padding around the date field to create space between the text and the border. Use the following settings:
    • PADDING OPTIONS:
      • Icon: all padding, top padding, left padding, bottom padding, right padding.
      • Size: in pixels using up and down arrows or by entering a numeric value.

Background​

  • BACKGROUND: Customize the background of the date field using the following settings:
    • BACKGROUND OPTIONS:
      • Background Color: Set the background color using a color picker or enter values in HEX, RGBA, or HSLA format.
      • Image: Select an image from the media library or provide a URL for an online image.
      • Background Attachment: Choose how the background behaves with options like scroll, fixed, local, initial, or inherit.
      • Background Position X/Y: Adjust the position of the background image along the X-axis (horizontal) and Y-axis (vertical) using pixel values.
      • Background Repeat: Control how the background image repeats with options like repeat, repeat-x, repeat-y, no-repeat, initial, or inherit.
      • Background Size: Set the size of the background image to auto, cover, contain, or use specific dimensions.
      • Background Origin: Define the positioning area of the background with options like border-box, padding-box, content-box, initial, or inherit.

Label Font​

  • LABEL FONT: Customize the font of the label for the date field using the following settings:
  • Design System: By default this follows the "Label medium" on the active design system.
    • FONT OPTIONS:
      • Alignment: left, center, right, aligned.
      • Font type: choose from available font families.
      • Font-size: number expressed in px, em, or rem (where "em" is relative to the font size of the element itself, and "rem" is relative to the root element's font size).
      • Letter spacing: in pixels.
      • Line height: in pixels.
      • Style: normal, italic, oblique, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Weight: thin, extra light, light, normal, medium, semi bold, bold, extra bold, black.
      • Color: picker or values in HEX, RGBA, HSLA.
      • Stretch: Normal, semi condensed, condensed, extra condensed, ultra condensed, semi expanded, expanded, extra expanded, ultra expanded.
      • Variant: normal, small caps, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Caps variant: normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial (inherits the browser’s default), inherit (inherits from the parent element).

Answer Font​

  • ANSWER FONT: Customize the font of the text displayed in the date field using the following settings:
    • FONT OPTIONS: (same as above).

Input Field Border​

  • INPUTFIELD BORDER: Customize the border of the input field containing the date using the following settings:
    • BORDER OPTIONS: (same as above).
  • Design System: By default with on focus this follows the "Accent one" on the active design system.

Explanation of Terms​

  • Initial: Sets the property to its default value as defined in the CSS specification.
  • Inherit: Makes the element inherit the property from its parent element.
  • em/rem: Relative units based on the font size of the element or root element, respectively. An "em" is relative to the font size of the element itself, while a "rem" is relative to the font size of the root element (usually the <html> element).

This style guide provides a comprehensive overview of the styling options available for the Date Field component in NoCode-X, ensuring users can create visually appealing and functional designs.

Actions​

Event: On Change​

  • This action is executed whenever the date field value is changed by the user, whether through selecting a date from the picker or entering a value and exiting the focus.
  • It triggers actions or processes based on the new date selection, enabling dynamic updates within the application.

Compatible functions​

  • Get value of date field
  • Set invalid message of date field
  • Set value of date field
  • Create date
  • Format date
  • Parse date